import React, { useMemo } from 'react';
import OriginIcon from '@/molecules/IconSelector/Icon';
import OriginIconSelector from '@/molecules/IconSelector/IconSelector';
import { defaultFormatResult, useRequest } from '@/hooks';
import { setUsedIcons } from '@/pages/Setting/Privilege/services';

const iconfontClassName = 'iconfont';
const iconList = [
    'iconputongyuangongmoban',
    'icongongzuoguanlimoban',
    'iconbumenzhuguanmoban',
    'iconcaiwucaozuomoban',
    'iconhangzhengcaozuomoban',
    'iconxiangmuguanlimoban',
    'iconcaiwuguanlimoban',
    'iconrenshicaozuomoban',
    'iconrenshiguanlimoban',
    'iconputongguanlimoban',
    'icongaoguanmoban'
];
const colorList = ['#FFA22D|#FFF5EA', '#5590F6|#EDF3FE', '#FF7760|#FFF1EF', '#44C69D|#ECF9F5'];

const withIcon = props => {
    const { disabled, ...otherProps } = props;
    return (
        <OriginIcon
            iconfontClassName={iconfontClassName}
            style={disabled && { backgroundColor: 'rgba(0,0,0,0.02)', color: 'rgba(0,0,0,0.25)' }}
            {...otherProps}
        />
    );
};

const withIconSelector = React.forwardRef((props, ref) => {
    const { defaultVal } = props;
    // 获取禁用的选项
    const { data: disabledOptions, loading } = useRequest(() => setUsedIcons(), {
        ...defaultFormatResult
    });

    // 排除掉当前的value值
    const currentDisabledOptions = useMemo(() => disabledOptions?.filter(item => item !== defaultVal), [
        defaultVal,
        disabledOptions
    ]);

    return (
        !loading && (
            <OriginIconSelector
                iconfontClassName={iconfontClassName}
                iconList={iconList}
                colorList={colorList}
                disabledOptions={currentDisabledOptions}
                {...props}
                ref={ref}
            />
        )
    );
});

export const Icon = withIcon;
export const IconSelector = withIconSelector;
export { parseIconValue, combineIconValue } from '@/molecules/IconSelector/utils';
